<template lang="">
	<div class="pic-wrap">
		<!-- 图片和头像 不能点击-->
		<div class="bgcImg">
			<div class="header-img">
				<img
					src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u819.png"
					alt=""
				/>
			</div>
			<div class="userInfo">
				<div class="avatar"><img :src="userinfo.avatar" alt="" /></div>
				<span :name="userinfo.username">{{ userinfo.username }}</span>
			</div>
		</div>
	</div>
</template>
<script>
import user from '@/store/modules/user';
import { mineApi } from '@/api/mine';
import { Toast } from 'vant';
export default {
	name: 'mineheader',
	data() {
		return {
			userinfo: {},
		};
	},
	created() {
		this.getUser();
	},
	methods: {
		async getUser() {
			let res = await mineApi();
			this.userinfo = res.data.userinfo;
		},
	},
};
</script>
<style lang="scss" scoped>
.bgcImg {
	width: 100%;
	height: 250px;
	.header-img {
		height: 250px;
		img {
			height: 100%;
		}
	}
	.userInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 12%;
		left: 50%;
		transform: translate(-50%, -50%);
		.avatar {
			height: 80px;
			width: 80px;
			background-color: #fff;
			border-radius: 50%;
			img {
				height: 80px;
				width: 80px;
				background-color: #fff;
				border-radius: 50%;
			}
		}
		span {
			padding: 10px;
			font-size: 16px;
			color: #fff;
		}
	}
}
</style>
